<template>
  <div class="category">
    <h3>{{ title }}</h3>
    <!-- <url v-show="title !== '电影'">
      <li v-for="(item, index) in listData" :key="index">{{ item }}</li>
    </url>
    <img
      v-show="title == '电影'"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fvsd-picture.cdn.bcebos.com%2Fa787b34846892f17d40f8a227c90308f8af46310.jpg&refer=http%3A%2F%2Fvsd-picture.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653045646&t=99fc97365ed1393cf2af4fb3ddb548e9"
    />
    <video></video> -->
    <!-- 定义一个插槽，规定组件的使用者填入 -->
    <slot>
        当使用者没有传递时，我会出现
    </slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["listData", "title"],
};
</script>

<style>
.category {
  background-color: lightcyan;
  width: 200px;
  height: 300px;
}
h3 {
  text-align: center;
  background-color: aquamarine;
}
img {
  width: 100%;
}
</style>